﻿<template>
  <div class="app-container" >
    <div class="search_opeation">
      <el-form :model="queryParams" size="mini" :inline="true"  label-width="68px" label-position="left">
        <el-row>
          <el-col :span="5" >
            <el-form-item label="中文名称" >
              <el-input v-model="queryParams.fileZhName" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="关键词">
              <el-input v-model="queryParams.keyword" style="width:205px"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="配置点">
              <el-select v-model="queryParams.configType" filterable clearable placeholder="请选择" style="width:100%">
                <el-option
                  v-for="(item, key) in configType"
                  :key="key"
                  :value="item.dictValue"
                  :label="item.dictLabel"
                  size="small"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="机型">
              <el-select v-model="queryParams.airplaneType" filterable clearable placeholder="请选择" style="width:100%">
                <el-option
                  v-for="(item, key) in airplaneType"
                  :key="key"
                  :value="item.dictValue"
                  :label="item.dictLabel"
                  size="small"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="英文名称">
              <el-input v-model="queryParams.fileEnName" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态">
              <el-select v-model="queryParams.status" filterable clearable placeholder="请选择">
                <el-option
                  v-for="(item, key) in status"
                  :key="key"
                  :value="item.dictValue"
                  :label="item.dictLabel"
                  size="small"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
              <el-form-item label="业务类型">
                <el-select v-model="queryParams.bizType" filterable clearable placeholder="请选择">
                  <el-option
                    v-for="(item, key) in bizType"
                    :key="key"
                    :value="item.dictValue"
                    :label="item.dictLabel"
                    size="small"
                  />
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="使用状态">
              <el-select v-model="queryParams.useStatus"  filterable clearable placeholder="请选择" @change="selectUseStateChanged">
                <el-option
                  v-for="(item, key) in useStatus"
                  :key="key"
                  :value="item.dictValue"
                  :label="item.dictLabel"
                  size="small"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item label="日期时间" >
              <el-date-picker
                v-model="queryParams.createdTime"
                style="width:190px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: center;">
        <el-button type="primary" style="float: left;"  size="small" @click="showAddConfig">新增</el-button>
        <el-button type="primary" style="float: right;" size="small" @click="getData">查询</el-button>
      </div>
    </div>
    <div class="search_result">
      <el-table :stripe='true' :border='true' height="400" v-loading="loading" ref="multipleTable"
                :data="configTableData" tooltip-effect="dark" style="width: 99%">
        <el-table-column type="selection" show-overflow-tooltip>
        </el-table-column>
        <el-table-column sortable prop="configId" label="编号"  show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>

        <el-table-column sortable prop="fileZhName" label="中文名称"  show-overflow-tooltip/>

        <el-table-column sortable prop="fileEnName" label="英文名称" show-overflow-tooltip/>

        <el-table-column sortable prop="airplaneType" label="机型" show-overflow-tooltip/>K

        <el-table-column sortable prop="configType" label="配置点类型" show-overflow-tooltip/>
        <el-table-column sortable prop="version" label="版本号" show-overflow-tooltip/>
        <el-table-column sortable prop="roleGroup" label="权限组" show-overflow-tooltip/>
<!--        <el-table-column sortable prop="createdBy" label="创建人" show-overflow-tooltip/>-->

        <el-table-column sortable prop="createdTime" label="创建时间" show-overflow-tooltip/>

        <el-table-column sortable prop="statusName" label="状态" show-overflow-tooltip/>

        <el-table-column sortable  label="操作" width="400" align="center" prop="statusNo" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button size ="mini" type="text" icon="el-icon-edit"  @click="showConfirmConfig(scope.row.version)"  v-show='scope.row.statusNo === 1'>确认</el-button>
            <el-button size ="mini" type="text" icon="el-icon-check" @click="showReleaseConfig(scope.row.version)" v-show='scope.row.statusNo === 2'>发布</el-button>
            <el-button size ="mini" type="text" icon="el-icon-view" @click="showDetailConfig(scope.row.version)" v-show='scope.row.statusNo === 3'>详情</el-button>
            <el-button size ="mini" type="text" icon="el-icon-edit" @click="showReplaceConfig(scope.row.version,scope.row.configId)" v-show='scope.row.statusNo === 3'>修改</el-button>
            <el-button size ="mini" type="text" icon="el-icon-edit" @click="showEditConfig(scope.row.configId)" v-show='scope.row.statusNo === 1 || scope.row.statusNo === 2'>编辑</el-button>
            <el-button size ="mini" type="text" icon="el-icon-search" @click="showHistoryVersion(scope.row.configId, scope.row.version)" v-show='scope.row.statusNo === 3'>查看历史版本</el-button>
            <el-switch
              v-model="scope.row.switchState"
              :active-value="1"
              :inactive-value="0"
              active-color="#B9B9B9"
              inactive-color="#02538C"
              active-text="禁用"
              inactive-text="启用"
              v-show='scope.row.statusNo === 3'
              @change="checkUse(scope.row.configId)"/>
          </template>
        </el-table-column>

        <span slot='append' v-show='showWarning'>
      <el-alert :title="warningMsg" type="warning">
      </el-alert>
    </span>
      </el-table>

      <!--分页-->
      <p-paging @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currPage='currPage' :pageSize="pageSize" :total='total'/>
    <!--新增配置-->
    <el-dialog v-if="open" :visible.sync="open" :close-on-click-modal="false" :destroy-on-close="true" width="40%" top="7vh" class="techDoc_dialog" @close="closeEdit" size ="50%">
      <span slot="title">
        <doc-header :title="title"></doc-header>
      </span>
      <p-edit   :configId="configId" :handle="handle" @closeEdit="closeEdit" @closeEditAndOpenConfirmConfig="closeEditAndOpenConfirmConfig"></p-edit>
    </el-dialog>
    <!--历史版本-->
    <el-dialog  v-if="versionShow" :visible.sync="versionShow" :close-on-click-modal="false" :destroy-on-close="true" width="60%" top="7vh" class="techDoc_dialog">
      <span slot="title">
        <doc-header title="历史版本"></doc-header>
      </span>
      <p-version  :source="1" :configId="configId"></p-version>
    </el-dialog>
    <!--修改配置-->
    <el-dialog v-if="replaceShow" :visible.sync="replaceShow" :close-on-click-modal="false" :destroy-on-close="true" width="40%" top="7vh" class="techDoc_dialog"  @close="closeEdit">
      <span slot="title">
        <doc-header title="修改配置"></doc-header>
      </span>
      <p-replace :version="version" :configId="configId"  @closeEdit="closeEdit" @showConfirmConfig="showConfirmConfig"></p-replace>
    </el-dialog>
      <!--配置确定页-->
    <el-dialog  v-if="confirmShow" :visible.sync="confirmShow" :close-on-click-modal="false" width="60%" top="7vh" class="techDoc_dialog" :append-to-body="true" :destroy-on-close="true">
      <span slot="title">
        <doc-header :title="titleName"></doc-header>
      </span>
      <p-config-confirm :state="configState" :configId="configId" :disabled="disable" :basicConfig="basicConfig" @changeConfigStatus="changeConfigStatus" @closeConfirmConfig="closeConfirmConfig"/>
    </el-dialog>

  </div>
  </div>
</template>

<script>
import { configPage, configDetail, checkFileSwitch } from '@/api/config/config'
import { dictChildDetail } from '@/api/dict/dict'
import pEdit from '@/views/config/edit'
import pReplace from '@/views/config/replace'
import DocHeader from '../../components/header/DocHeader'
import pVersion from '@/views/history/ConfigHistorySearch'
import pPaging from '@/components/paging.vue'
import pConfigConfirm from '@/views/config/ConfigConfirm'
export default {
  name: 'page',
  components: {
    DocHeader,
    pEdit,
    pVersion,
    pReplace,
    pPaging,
    pConfigConfirm
  },
  data () {
    return {
      // 业务类型
      bizType: [],
      // 机型
      airplaneType: [],
      //  配置点
      configType: [],
      //  状态
      status: [],
      //  使用状态
      useStatus: [],
      //  新增/编辑页面展示
      open: false,
      title: '新增配置',
      //  历史版本显示控制
      versionShow: false,
      //  修改配置显示控制
      replaceShow: false,
      // 配置确认页面显示控制
      confirmShow: false,
      // 配置发布页面显示控制
      releaseShow: false,
      // 是否可编辑
      disable: false,
      // 弹框标题名称
      titleName: '',
      // 配置弹窗
      configState: '',
      // 切换状态
      switchState: '',
      // 查询详情数据
      basicConfig: {
        configId: '',
        bizType: '',
        airplaneType: '',
        configType: '',
        fileZhName: '',
        fileEnName: '',
        roleGroup: '',
        remark: '',
        createdBy: '',
        createdTime: '',
        updatedBy: '',
        updatedTime: '',
        fileUrl: '',
        content: '',
        version: ''
      },
      // 详情查询参数
      configDetailParams: {
        configId: '',
        roleGroup: '',
        status: '',
        useStatus: ''
      },
      queryParams: {
        pageNum: '',
        pageSize: '',
        fileZhName: '',
        fileEnName: '',
        configType: '',
        airplaneType: '',
        status: '',
        bizType: '',
        useStatus: '',
        keyword: '',
        createdTime: []
      },
      tableData: [],
      multipleSelection: [],
      loading: false,
      showWarning: false,
      warningMsg: '',
      configId: 0,
      version: '',
      //  配置分页数据
      configTableData: [],
      tempConfigData: [],
      //  配置新增‘编辑标识
      handle: '',
      total: 0,
      // 默认第一页
      currPage: 1,
      pageSize: 10
    }
  },
  created () {
    // 业务类型
    const bizType = 'bizType'
    dictChildDetail(bizType).then((res) => {
      this.bizType = this.handleDict(res.data)
    })

    // 机型
    const airplaneType = 'airplaneType'
    dictChildDetail(airplaneType).then((res) => {
      this.airplaneType = this.handleDict(res.data)
    })
    // 配置点
    const configType = 'configType'
    dictChildDetail(configType).then((res) => {
      this.configType = this.handleDict(res.data)
    })
    // 权限组
    const roleGroup = 'roleGroup'
    dictChildDetail(roleGroup).then((res) => {
      this.roleGroup = this.handleDict(res.data)
    })
    // 权限组
    const status = 'status'
    dictChildDetail(status).then((res) => {
      this.status = this.handleDict(res.data)
    })
    // 权限组
    const useStatus = 'useStatus'
    dictChildDetail(useStatus).then((res) => {
      this.useStatus = this.handleDict(res.data)
    })
    this.getData()
  },
  computed: {
  },
  methods: {
    //  数据查询
    getData () {
      // 请求接口后取数据给tableData赋值
      // 请求的接口的参数给个参考
      this.queryParams.pageNum = this.currPage
      this.queryParams.pageSize = this.pageSize
      if (this.queryParams.createdTime === null) {
        this.queryParams.createdTime = []
      }
      configPage(this.queryParams).then((res) => {
        if (res.code === 0) {
          this.configTableData = res.data.list
          this.tempConfigData = res.data.list
          this.total = res.data.total
        }
      })
    },
    handleSizeChange (val1) {
      // 改变每页显示数量重新请求数据，重置当前页为第一页
      this.pageSize = val1
      this.currPage = 1
      this.getData()
    },
    handleCurrentChange (val) {
      // 点击改变当前页
      this.currPage = val
      this.getData()
    },
    //  展示配置新增页面
    showAddConfig (configId) {
      this.configId = configId
      this.open = true
      this.handle = 'add'
      this.title = '新增配置'
    },
    //  展示配置编辑页面
    showEditConfig (configId) {
      this.configId = configId
      this.open = true
      this.handle = 'edit'
      this.title = '修改配置'
    },
    //  打开历史版本列表
    showHistoryVersion (configId, version) {
      this.configId = configId
      this.version = version
      this.versionShow = true
    },
    //  展示配置编辑页面
    showReplaceConfig (version, configId) {
      this.version = version
      this.configId = configId
      this.replaceShow = true
    },
    checkUse (val) {
      checkFileSwitch(val).then((res) => {
        if (res.code === 0) {
          this.getData()
        }
      })
    },
    closeEdit (val) {
      this.open = val
      this.replaceShow = val
    },
    // 打开确认配置页
    showConfirmConfig (version) {
      this.disable = false
      this.titleName = '确认配置'
      this.configState = 1
      // 获取基本配置信息
      this.getConfigDetail(version)
    },
    // 打开发布配置页
    showReleaseConfig (version) {
      this.confirmShow = true
      this.disable = true
      this.titleName = '发布配置'
      this.configState = 2
      // 获取基本配置信息
      this.getConfigDetail(version)
    },
    // 打开发详情配置页
    showDetailConfig (version) {
      this.confirmShow = true
      this.disable = true
      this.titleName = '详情配置'
      this.configState = 3
      // 获取基本配置信息
      this.getConfigDetail(version)
    },
    // 关闭配置页
    closeConfirmConfig () {
      this.open = false
      this.confirmShow = false
      this.releaseShow = false
      this.getData()
    },
    closeEditAndOpenConfirmConfig (version) {
      alert('打开配置确认页')
      this.open = false
      this.showConfirmConfig(version)
    },
    changeConfigStatus (version, statusNo) {
      this.statusNo = statusNo
      this.disable = true
      this.configState = statusNo
      // 获取基本配置信息
      this.getConfigDetail(version)
    },
    // 获取配置详情
    getConfigDetail (version) {
      if (version !== '0') {
        configDetail(version).then(res => {
          if (res.code === 0) {
            this.basicConfig = res.data
            this.basicConfig.version = version
          }
          this.confirmShow = true
        })
      } else {

      }
    },
    //  切换配置文件状态前端分页数据
    selectUseStateChanged (useState) {
      if (!useState) {
        return
      }
      let ss = []
      let data = this.tempConfigData
      console.log(data)
      data.forEach((value) => {
        if (value.switchState === parseInt(useState)) {
          ss.push(value)
        }
      })
      this.configTableData = ss
      console.log('过滤的配置数据' + ss)
    }
  }
}
</script>

<style scoped="scoped">
  .relation_doc_search .search_opeation {
    padding-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .el-form-item {
    display: inline-block !important;
  }
    .app-container {
      padding: 20px;
    }
  .el-form-item__label {
    display: none;
    width: 0px !important;
  }
</style>
